﻿@{
    ViewBag.Title = "银行卡管理";
}
@section CSS{
    <link href="~/Content/css/layerui/layui.css" rel="stylesheet" />
}
<div class="content-wrapper">
    <section class="content-header">
        <h1>
            提现账号
            <small>管理</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#">财务管理</a></li>
            <li class="active">提现账号</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li id="li_company"><a href="#tab_company" data-toggle="tab">企业账户</a></li>
                        <li id="li_person"><a href="#tab_person" data-toggle="tab">个人账户</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab_company">
                            <form class="form-horizontal" id="from-company" novalidate="novalidate" method="post" action="/Finance/AddorEditBankCard">

                                <div class="form-group">
                                    <label class="col-sm-3 control-label">公司名称 <span style="color:red;">*</span>：</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="company_name" required="" aria-required="true" id="company_name0" class="form-control" placeholder="公司名称">
                                        <span class="help-block m-b-none"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">开户行 <span style="color:red;">*</span>：</label>
                                    <div class="col-sm-9">
                                        <select style="width:150px;" name="bank_name" id="bank_name0" class="form-control" required="" aria-required="true">
                                            <option value="-1">-  请选择开户行 -</option>
                                            <option value="中国银行">中国银行</option>
                                            <option value="中国工商银行">中国工商银行</option>
                                            <option value="中国农业银行">中国农业银行</option>
                                            <option value="中国建设银行">中国建设银行</option>
                                            <option value="交通银行">交通银行</option>
                                        </select>
                                        <span class="help-block m-b-none"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">银行开户姓名 <span style="color:red;">*</span>：</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="account_holder" id="account_holder0" required="" aria-required="true" value="" class="form-control" placeholder="银行开户姓名">
                                        <span class="help-block m-b-none"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">银行卡号 <span style="color:red;">*</span>：</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="bank_cardno" id="bank_cardno0" required="" aria-required="true" value="" class="form-control" placeholder="银行卡号">
                                        <span class="help-block m-b-none"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">开户行地区：</label>
                                    <div class="col-sm-9">
                                        <select style="width: 120px; height: 30px;" id="selProvice0" name="selProvice"><option value="">请选择</option><option value="1">北京</option><option value="2">天津</option><option value="3">河北省</option><option value="4">山西省</option><option value="5">内蒙古</option><option value="6">辽宁省</option><option value="7">吉林省</option><option value="8">黑龙江省</option><option value="9">上海</option><option value="10">江苏省</option><option value="11">浙江省</option><option value="12">安徽省</option><option value="13">福建省</option><option value="14">江西省</option><option value="15">山东省</option><option value="16">河南省</option><option value="17">湖北省</option><option value="18">湖南省</option><option value="19">广东省</option><option value="20">广西</option><option value="21">海南省</option><option value="22">重庆</option><option value="23">四川省</option><option value="24">贵州省</option><option value="25">云南省</option><option value="26">西藏自治区</option><option value="27">陕西省</option><option value="28">甘肃省</option><option value="29">青海省</option><option value="30">宁夏</option><option value="31">新疆</option><option value="32">台湾省</option><option value="33">香港</option><option value="34">澳门</option><option value="35">海外</option></select>
                                        <select style="width: 120px; height: 30px; display: none;" name="selCity" id="selCity0"></select>
                                        <select style="width: 120px; height: 30px; display: none;" name="selCounty" id="selCounty0"></select>
                                        <span class="help-block m-b-none"></span>
                                        @*<input type="text" name="bankaddress" id="bankaddress" class="form-control" placeholder="请输入地址">*@
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">开户行支行：</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="bank_branch" id="bank_branch0" value="" class="form-control" placeholder="开户行支行">
                                        <span class="help-block m-b-none"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">开户预留手机号 <span style="color:red;">*</span>：</label>
                                    <div class="col-sm-9">
                                        <input type="number" name="mobile_number" id="mobile_number0" required="" aria-required="true" maxlength="11"  value="" class="form-control" placeholder="开户预留手机号">
                                        <span class="help-block m-b-none"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">开户行许可证 <span style="color:red;">*</span>：</label>
                                    <div class="col-sm-9">
                                        <div class="layui-upload">
                                            <button type="button" class="layui-btn" id="test1" style="display:none;">上传图片</button><input class="layui-upload-file" type="file" accept="undefined" name="file">
                                            <div class="layui-upload-list">
                                                <img class="layui-upload-img" id="company_permission_img0" onclick="javascript:imgzoom(this.id)" src="~/Content/img/xukezheng.jpg" style="width: 150px; height: 150px; cursor: pointer">
                                                <p id="demoText1"></p>
                                            </div>
                                        </div>
                                        <span class="help-block m-b-none">图片大小不超过1M；照片要清晰，文字清晰可见，边框完整；点击上图可看样例</span>

                                    </div>
                                </div>
                                <input type="hidden" id="id0" value="0" name="id">
                                <input type="hidden" id="company_permission0" value="" name="company_permission">
                                <input type="hidden" id="province0" value="0" name="bank_province">
                                <input type="hidden" id="city0" value="0" name="bank_city">
                                <input type="hidden" id="country0" value="0" name="bank_country">
                                <input type="hidden" id="types" value="0" name="types">
                                <div class="form-group">
                                    <div class="col-sm-4 col-sm-offset-3">
                                        <button class="btn btn-primary" type="submit" id="btnSave0" style="display:none;">保存信息</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="tab-pane" id="tab_person">
                            <form class="form-horizontal" id="from-person" novalidate="novalidate" method="post" action="/Finance/AddorEditBankCard">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">开户行名称 <span style="color:red;">*</span>：</label>
                                    <div class="col-sm-9">
                                        <select style="width:150px;" name="bank_name" id="bank_name0" class="form-control" required="" aria-required="true">
                                            <option value="-1">-  请选择开户行 -</option>
                                            <option value="中国银行">中国银行</option>
                                            <option value="中国工商银行">中国工商银行</option>
                                            <option value="中国农业银行">中国农业银行</option>
                                            <option value="中国建设银行">中国建设银行</option>
                                            <option value="交通银行">交通银行</option>
                                        </select>
                                        <span class="help-block m-b-none"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">持卡人姓名 <span style="color:red;">*</span>：</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="account_holder" id="account_holder1" required="" aria-required="true" value="" class="form-control" placeholder="持卡人姓名">
                                        <span class="help-block m-b-none"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">银行卡号 <span style="color:red;">*</span>：</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="bank_cardno" id="bank_cardno1" required="" aria-required="true" value="" class="form-control" placeholder="银行卡号">
                                        <span class="help-block m-b-none"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">开户行地区：</label>
                                    <div class="col-sm-9">
                                        <select style="width: 120px; height: 30px;" id="selProvice1" name="selProvice"><option value="">请选择</option><option value="1">北京</option><option value="2">天津</option><option value="3">河北省</option><option value="4">山西省</option><option value="5">内蒙古</option><option value="6">辽宁省</option><option value="7">吉林省</option><option value="8">黑龙江省</option><option value="9">上海</option><option value="10">江苏省</option><option value="11">浙江省</option><option value="12">安徽省</option><option value="13">福建省</option><option value="14">江西省</option><option value="15">山东省</option><option value="16">河南省</option><option value="17">湖北省</option><option value="18">湖南省</option><option value="19">广东省</option><option value="20">广西</option><option value="21">海南省</option><option value="22">重庆</option><option value="23">四川省</option><option value="24">贵州省</option><option value="25">云南省</option><option value="26">西藏自治区</option><option value="27">陕西省</option><option value="28">甘肃省</option><option value="29">青海省</option><option value="30">宁夏</option><option value="31">新疆</option><option value="32">台湾省</option><option value="33">香港</option><option value="34">澳门</option><option value="35">海外</option></select>
                                        <select style="width: 120px; height: 30px; display: none;" name="selCity" id="selCity1"></select>
                                        <select style="width: 120px; height: 30px; display: none;" name="selCounty" id="selCounty1"></select>
                                        <span class="help-block m-b-none"></span>
                                        @*<input type="text" name="bankaddress" id="bankaddress" class="form-control" placeholder="请输入地址">*@
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">开户行支行：</label>
                                    <div class="col-sm-9">
                                        <input type="text" name="bank_branch" id="bank_branch1" value="" class="form-control" placeholder="开户行支行">
                                        <span class="help-block m-b-none"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">开户预留手机号 <span style="color:red;">*</span>：</label>
                                    <div class="col-sm-9">
                                        <input type="number" name="mobile_number" id="mobile_number1" required="" aria-required="true" maxlength="11" value="" class="form-control" placeholder="开户预留手机号">
                                        <span class="help-block m-b-none"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">持卡人身份证及授权 <span style="color:red;">*</span>：</label>

                                    <div class="col-sm-3">
                                        <div class="layui-upload">
                                            <button type="button" class="layui-btn" id="test3" style="display:none;">上传身份证正面</button><input class="layui-upload-file" type="file" accept="undefined" name="file">
                                            <div class="layui-upload-list">
                                                <img class="layui-upload-img" id="bank_face_card_img" onclick="javascript:imgzoom(this.id)" style="width: 150px; height: 150px; cursor: pointer">
                                                <p id="demoText3"></p>
                                            </div>
                                        </div>
                                        <span class="help-block m-b-none">图片大小不超过1M</span>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="layui-upload">
                                            <button type="button" class="layui-btn" id="test4" style="display:none;">上传身份证反面</button><input class="layui-upload-file" type="file" accept="undefined" name="file">
                                            <div class="layui-upload-list">
                                                <img class="layui-upload-img" id="bank_opposite_card_img" onclick="javascript:imgzoom(this.id)" style="width: 150px; height: 150px; cursor: pointer">
                                                <p id="demoText4"></p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="layui-upload">
                                            <button type="button" class="layui-btn" id="test2" style="display:none;">上传授权证明</button><input class="layui-upload-file" type="file" accept="undefined" name="file">
                                            <div class="layui-upload-list">
                                                <img class="layui-upload-img" id="company_permission_img1" onclick="javascript:imgzoom(this.id)"  src="~/Content/img/shouquan.png" style="width: 150px; height: 150px; cursor: pointer">
                                                <p id="demoText2"></p>
                                            </div>
                                        </div>
                                        <span class="help-block m-b-none">公司授权结算账号证明，点击上图可看样例</span>
                                    </div>
                                </div>
                                <input type="hidden" id="id1" value="0" name="id">
                                <input type="hidden" id="company_permission1" value="" name="company_permission">
                                <input type="hidden" id="bank_face_card" value="" name="bank_face_card">
                                <input type="hidden" id="bank_opposite_card" value="" name="bank_opposite_card">
                                <input type="hidden" id="province1" value="0" name="bank_province">
                                <input type="hidden" id="city1" value="0" name="bank_city">
                                <input type="hidden" id="country1" value="0" name="bank_country">
                                <input type="hidden" id="types" value="1" name="types">
                                <div class="form-group">
                                    <div class="col-sm-4 col-sm-offset-3">
                                        <button class="btn btn-primary" type="submit" id="btnSave1" style="display:none;">保存信息</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
</div>
@section JS{
    <script src="~/Content/js/jquery.form.js"></script>
    <script src="~/Content/plugins/validate/jquery.validate.min.js"></script>
    <script src="~/Content/plugins/validate/messages_zh.min.js"></script>
    <script>
        $(function () {
            getinfo();
        });
        function getinfo() {
            ajax("/Finance/GetBankCard", {}, function (data) {
                console.log(data);
                if (data != "") {
                    if (data.types == 1) {
                        $("#id1").val(data.id);
                        $("#mobile_number1").val(data.mobile_number);
                        $("#bank_name1").val(data.bank_name);
                        $("#bank_branch1").val(data.bank_branch);
                        $("#bank_cardno1").val(data.bank_cardno);
                        $("#account_holder1").val(data.account_holder);
        if(data.company_permission!=""){
          $("#company_permission_img1").attr('src', domain + data.company_permission);
          $("#company_permission1").val(data.company_permission);
        }
         if(data.bank_face_card!=""){
          $("#bank_face_card_img").attr('src', domain + data.bank_face_card);
          $("#bank_face_card").val(data.bank_face_card);
        }
         if(data.bank_opposite_card!=""){
          $("#bank_opposite_card_img").attr('src', domain + data.bank_opposite_card);
          $("#bank_opposite_card").val(data.bank_opposite_card);
        }

                        //获取省市城市列表
                        getprovince(0, "#selProvice1", data.bank_province);
                        getprovince(data.bank_province, "#selCity1", data.bank_city);
                        getprovince(data.bank_city, "#selCounty1", data.bank_country);
                        $("#province1").val(data.bank_province);
                        $("#city1").val(data.bank_city);
                        $("#country1").val(data.bank_country);
                        if (data.status==0) {
                            $("#btnSave1").show();
                            $("#test2").show();
                            $("#test3").show();
                            $("#test4").show();
                        }
                        $("#li_person").addClass("active");
                        $("#li_company").hide();
                        $("#tab_person").show();
                        $("#tab_company").hide();
                    }
                    else {
                        $("#id0").val(data.id);
                        $("#company_name0").val(data.company_name);
                        $("#mobile_number0").val(data.mobile_number);
                        $("#bank_name0").val(data.bank_name);
                        $("#bank_branch0").val(data.bank_branch);
                        $("#bank_cardno0").val(data.bank_cardno);
                        $("#account_holder0").val(data.account_holder);

                        $("#company_permission_img0").attr('src', domain + data.company_permission);
                        $("#company_permission0").val(data.company_permission);

                        //获取省市城市列表
                        getprovince(0, "#selProvice0", data.bank_province);
                        getprovince(data.bank_province, "#selCity0", data.bank_city);
                        getprovince(data.bank_city, "#selCounty0", data.bank_country);
                        $("#province0").val(data.bank_province);
                        $("#city0").val(data.bank_city);
                        $("#country0").val(data.bank_country);
                        if (data.status == 0) {
                            $("#btnSave0").show();
                            $("#test1").show();
                        }
                        $("#li_company").addClass("active");
                        $("#li_person").hide();
                    }
                }
                else {
                    getprovince(0, "#selProvice0", "");
                    $("#btnSave0").show();
                    $("#test1").show();
                    getprovince(0, "#selProvice1", "");
                    $("#btnSave1").show();
                    $("#test2").show();
                    $("#test3").show();
                    $("#test4").show();
                    $("#li_company").addClass("active");
                }
            }, true, "", "get"); 
        }
        $("#from-company").validate({
            ajaxPost: true,
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    dataType: "json",
                    success: function (result) {
                        if (result.status == "y") {
                            layer.msg("操作成功", { icon: 6, time: 1200 }, function () {
                                window.location.href = "/Finance/bankcard";
                            });
                        }
                        else {
                            layer.msg(result.info, { icon: 5, time: 2000 });
                        }
                    }
                });
            }
        });
        $("#from-person").validate({
            ajaxPost: true,
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    dataType: "json",
                    success: function (result) {
                        if (result.status == "y") {
                            layer.msg("操作成功", { icon: 6, time: 1200 }, function () {
                                window.location.href = "/Finance/bankcard";
                            });
                        }
                        else {
                            layer.msg(result.info, { icon: 5, time: 2000 });
                        }
                    }
                });
            }
        });
        function getprovince(id, obj, sid) {
            ajax("/tools/GetPrivoceList/" + id, {}, function (data) {
                var ui = "<option value=''>请选择</option>";
                $.each(data, function (row, value) {
                    ui += "<option value='" + value.id + "'>" + value.name + "</option>";
                })
                $(obj).html(ui);
                $(obj).show();
                if (sid != undefined && sid != '')
                    $(obj).val(sid);
            })
        }


        $("#selProvice0").change(function () {
            var _mId = $(this).val();
            if (_mId != "") {
                getprovince(_mId, "#selCity0");
                $("#province0").val(_mId);
            }
            else { $("#selCity0").html("<option value=''>请选择城市</option>"); }
            $("#selCity0").hide();
        });
        $("#selCity0").change(function () {
            var _mId = $(this).val();
            if (_mId != "") {
                getprovince(_mId, "#selCounty0");
                $("#city0").val(_mId);
            }
            else { $("#selCounty0").html("<option value=''>请选择区域</option>"); }
        });
        $("#selCounty0").change(function () {
            var _mId = $(this).val();
            if (_mId != "") {
                $("#country0").val(_mId);
            }
        });
        $("#selProvice1").change(function () {
            var _mId = $(this).val();
            if (_mId != "") {
                getprovince(_mId, "#selCity1");
                $("#province1").val(_mId);
            }
            else { $("#selCity1").html("<option value=''>请选择城市</option>"); }
            $("#selCity1").hide();
        });
        $("#selCity1").change(function () {
            var _mId = $(this).val();
            if (_mId != "") {
                getprovince(_mId, "#selCounty1");
                $("#city1").val(_mId);
            }
            else { $("#selCounty1").html("<option value=''>请选择区域</option>"); }
        });
        $("#selCounty1").change(function () {
            var _mId = $(this).val();
            if (_mId != "") {
                $("#country1").val(_mId);
            }
        });
        //图片点击跳转
        function imgzoom(obj) {
            var img = document.getElementById(obj).src
            if (!!img) {
                onclick = window.open(img)
            }
        }
        //后期可重构一个方法
        layui.use('upload', function () {
            var $ = layui.jquery
                , upload = layui.upload;
            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                , url: domain + "/tools/UploadPCImage?type=CompanyBankCard"
                 , size: 1024
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#company_permission_img0').attr('src', result); //图片链接（base64）

                    });
                },

                done: function (res) {
                    $('#company_permission_img0').attr('src', domain + res.info);
                    $('#company_permission0').val(sqlImgdomain + res.info);
                }
                , error: function () {
                    //，并实现重传
                    var demoText = $('#demoText1');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
            var uploadInst = upload.render({
                elem: '#test2'
               , url: domain + "/tools/UploadPCImage?type=CompanyBankCard"
                , size: 1024
               , before: function (obj) {
                   //预读本地文件示例，不支持ie8
                   obj.preview(function (index, file, result) {
                       $('#company_permission_img1').attr('src', result); //图片链接（base64）

                   });
               },

                done: function (res) {
                    $('#company_permission_img1').attr('src', domain + res.info);
                    $('#company_permission1').val(sqlImgdomain + res.info);
                }
               , error: function () {
                   //，并实现重传
                   var demoText = $('#demoText2');
                   demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                   demoText.find('.demo-reload').on('click', function () {
                       uploadInst.upload();
                   });
               }
            });
        var uploadInst = upload.render({
                elem: '#test3'
                , url: domain + "/tools/UploadPCImage?type=CompanyBankCard"
                 , size: 1024
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#bank_face_card_img').attr('src', result); //图片链接（base64）

                    });
                },

                done: function (res) {
                    $('#bank_face_card_img').attr('src', domain + res.info);
                    $('#bank_face_card').val(sqlImgdomain + res.info);
                }
                , error: function () {
                    //，并实现重传
                    var demoText = $('#demoText3');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        var uploadInst = upload.render({
                elem: '#test4'
                , url: domain + "/tools/UploadPCImage?type=CompanyBankCard"
                 , size: 1024
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#bank_opposite_card_img').attr('src', result); //图片链接（base64）

                    });
                },

                done: function (res) {
                    $('#bank_opposite_card_img').attr('src', domain + res.info);
                    $('#bank_opposite_card').val(sqlImgdomain + res.info);
                }
                , error: function () {
                    //，并实现重传
                    var demoText = $('#demoText4');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });
    </script>

}

